<template>
    <van-nav-bar class="top" :title=content left-text="" left-arrow @click-left="onClickLeft" />
    <div class="infro">
        <div class="left">
            <img src="http://lc-Bujw8nis.cn-n1.lcfile.com/50FIdxBjk3QDzxH3frzec2x2NnbSLta6/pic.png" alt="">
        </div>
        <div class="right">
            <p>{{ name + `${"⭐"}` }}</p>
            <span>高贵的SVIP客户欢迎您</span>
        </div>
    </div>
    <p class="myintegral">我的积分：{{ integrate }}</p>
    <van-cell title="个人设置" is-link />
    <van-cell title="地址管理" is-link to="/addresslist" />
    <van-cell title="积分券" is-link to="/mycoupon" />
    <div class="p-30">
        <van-button type="danger" block @click="handleLogout">退出登录</van-button>
    </div>
</template>

<script setup lang="ts">
import { BaseTransition, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from '../store/user'
const integrate = localStorage.getItem("integrate")
const router = useRouter();
const user = useUserStore();
const handleLogout = () => {
    localStorage.clear()
    router.push("/");
};
const content = ref('高贵的SVIP客户');
const onClickLeft = () => {
    router.push('./')
}
//用户名
const name = (JSON.parse(localStorage.userInfo)).username

</script>

<style lang="scss" scoped>
.infro {
    display: flex;
    background: rgb(256, 239, 246);
    width: 100%;
    height: 100px;

    .left {
        width: 90px;
        height: 90px;
        display: flex;

        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: auto;
        }
    }

    .right {
        p {
            font-size: 16px;
        }

        span {
            color: #666;
        }
    }
}

.myintegral {
    margin-left: 2rem;
    font-size: 4rem;
}
</style>